<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    :showFooter="false"
    :title="getTitle"
    :isDetail="false"
    :width="getIsMobile ? '95%':'80%'"
    @ok="handleSubmit"
  >
    <div class="desc-wrap">
      <BasicTable @register="registerTable" style="padding: 0 !important;">
      <template #toolbar>
        <!-- <a-button type="primary" @click="handleCreate"> 新增任务 </a-button> -->
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                // popConfirm: {
                //   title: '是否确认删除',
                //   placement: 'left',
                //   confirm: handleDelete.bind(null, record),
                // },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { useAppInject } from '@/hooks/web/useAppInject';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { columns, searchLogFormSchema } from './task.data';
  import { getRoleListByPage } from '@/api/demo/system';

  defineOptions({ name: 'TaskLogDetailDrawer' });

  const { getIsMobile } = useAppInject();
  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false });
    isUpdate.value = !!data?.isUpdate; 
  });

  const [registerTable, { reload }] = useTable({
    title: '任务调度执日志',
    api: getRoleListByPage,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchLogFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
  });

  const getTitle = computed(() => '任务执行记录');

  async function handleSubmit() {
    try {  
      setDrawerProps({ confirmLoading: true });
      closeDrawer();
      emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
</script>

<style>
.ant-page-header{
  padding-bottom: 0 !important;
}

.vben-page-wrapper-content{
  margin-top: 0 !important;
}
</style>
